<template>
    <a-form :form="form" class="formStyle">
        <div class="treeSty">
            <!-- tree 树形结构 -->

            <a-tree :tree-data="treeDataFirm" :checkable="true" :showIcon="true" @select="onSelectIndex"
                @check="handleCheck" selectable @expand="onExpand">

            </a-tree>
        </div>
        <div class="btnStyle">
            <a-form-item :wrapperCol="{ span: 24, offset: 5 }">
                <a-button :style="color = isclor" :type="clorbtn" @click="lastStep" class="lastBtn">上一步</a-button>
                <a-button :style="color = isclor" :type="clorbtn" @click="nextStep" class="nextBtn">下一步</a-button>
                <a-button @click="searchReset" icon="reload">重置</a-button>
            </a-form-item>
        </div>

    </a-form>
</template>

<script>
import axios from 'axios'

export default {
    name: '',
    data() {
        return {
            selectedKeys: [],
            wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
            title: '',
            visible: false,
            roleDisabled: false,
            confirmLoading: false,
            // 数据
            treeDataFirm: [],
            defaultCheck: true,
            form: this.$form.createForm(this),  // 手机表单中的数据
            // 公司用户
            formTitle: '',
            // 选中的公司的 title
            treeTitleList: [],

            bigtitle: [],
            smalltitle: [],

            clorbtn: 'dashed',
            isclor: '#eee',
            resInfo: {}

        }
    },
    mounted() {
        this.$bus.$on('formInfoValue', (params) => {
            console.log(params, 'p接收自定义的参数///////')
            this.resInfo = params
        })
        this.pointerRequestFirm()

        // let res = JSON.parse(localStorage.getItem('formInfoValue'))
        // this.resInfo = res
        // console.log(this.resInfo, 'JSON.parse////////')
    },
    watch: {
        checkedKeys(val) {
        },
    },
    methods: {
        async pointerRequestFirm() {
            const result = await axios.get('/mock/tebleTemplateTree')
            this.treeDataFirm = result.data.data
        },

        goNewFormFirm(url, title) {
            this.formTitle = title
        },

        onTreeChange(e) {
            this.defaultCheck = !this.defaultCheck
        },


        // 选中高亮的节点
        handleCheck(checkedKeys, { checked: bool, checkedNodes, node, event }) {
            this.smalltitle = checkedKeys

        },

        cloneNodeWithChildren(node) {
            const cloneNode = { ...node }
            if (cloneNode.children) {
                cloneNode.children = cloneNode.children.map(childNode => {
                    return this.cloneNodeWithChildren(childNode)
                })
            }
            return cloneNode
        },

        // 指标树节点
        onSelectIndex(e, selectedKeys, info) {
            // console.log(e, 'e点击提示')
        },

        onExpand(expandedKeys) {
            this.bigtitle = expandedKeys

        },

        onCheck(checkedKeys) {
            // console.log('onCheck', checkedKeys);
            this.checkedKeys = checkedKeys;
        },

        onSelect(selectedKeys, title) {
            this.selectedKeys = selectedKeys;
        },

        // 下一步
        nextStep() {
            console.log(this.resInfo, '////我传递的参数是自定义的')
            this.$bus.$emit('resInfo', this.resInfo)
            this.isclor = '#50baf3'
            this.clorbtn = 'primary'
            let treedata = {
                big: this.bigtitle,
                small: this.smalltitle
            }

            if (this.smalltitle.length > 0) {

                this.$bus.$emit('pages', 2)


                // console.log(treedata, 'treedatatreedatatreedata////')
                setTimeout(() => {
                    console.log('我发送过去了')
                    this.$bus.$emit('nextTitle', treedata)

                });

            } else {
                this.$message.warning('请选择条件')
            }
        },

        // 上一步
        lastStep() {
            this.$bus.$emit('pages', 0)
        },
        // 重置
        searchReset() { },
    }
}
</script>

<style lang="scss" scoped>
.formStyle {
    max-width: 70%;
    height: 560px;
    margin-left: 40%;
    display: flex;
    flex-direction: column;

    .treeSty {
        width: 400px;
        background: #fff;
        opacity: .8;
    }

    .btnStyle {
        margin: 10% -40%;

        .lastBtn {
            margin: 5% 0 0;
        }

        .nextBtn {
            margin: 5% 0 0 0
        }
    }
}</style>